<template>
  <div class="bgff p20">
    <em v-if="0">
      <el-button class="mb20" size="medium" type="primary" @click="addNet">添加权限</el-button>
      <!-- <el-button class="mb20" size="medium" type="primary" @click="expandFn">展开</el-button> -->
      <edit :is_edit="false" ref="form" :cur_this="cur_this"></edit>
    </em>
    <el-table
      :data="tableData"
      v-loading="loading"
      row-key="id"
      border
      style="width: 100%;margin-top:20px;"
      :expand-all="expand"
      empty-text="暂无数据"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="名称" min-width="150"></el-table-column>
      <el-table-column prop="alias" label="别名" min-width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="120">
          <template slot-scope="scope">
            {{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}
          </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" v-if="0">
        <template slot-scope="scope" v-if="scope.row.id!=1">
          <em>
            <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
            <edit :is_edit="true" :cur_this="cur_this" ref="edform"></edit>
          </em>
          <el-popover :ref="scope.row.id" placement="top" width="120" trigger="click">
            <p class="ptb10 tx-c">确定删除 此项 吗？</p>
            <div class="tx-c">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="del(scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="text" size="mini">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import edit from "./modul/edit";
import { _permissionsList, _permissionsDelete } from "@/http/ajax";
export default {
  components: { edit },
  data() {
    return {
      cur_this: this,
      loading: false,
      tableData: [],
      curPage: 1,
      size: 10,
      total: 0,
      expand: true
    };
  },
  created() {
    this.getList();
  },
  methods: {
    expandFn() {
      this.expand = !this.expand;
    },
    editClick(row) {
      const _this = this.$refs.edform;
      _this.dialog = true;
      _this.form = {
        name: row.name,
        alias: row.alias,
        pid: row.pid,
        id: row.id
      };
      _this.domInit();
    },
    addNet() {
      const _this = this.$refs.form;
      _this.dialog = true;
      _this.domInit();
    },
    // 处理部门分类
    deptDo() {
      return [
        {
          createTime: null,
          enabled: true,
          id: 0,
          label: "顶级目录",
          pid: 0,
          children: this.tableData
        }
      ];
    },
    // 获取banner列表
    getList(page) {
      this.tableData = [];
      this.loading = true;
      _permissionsList(
        {},
        res => {
          setTimeout(() => {
            this.total = res.totalElements;
            this.tableData = res.content;
            this.loading = false;
          }, 300);
        },
        err => {
          this.loading = false;
        }
      );
    },
    del(id) {
      _permissionsDelete(
        id,
        res => {
          this.getList();
        },
        err => {}
      );
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
